<template>
    <div class="global-help-category-page">
        <el-card shadow="never">
        <el-button type="primary" @click="onDialog">新增</el-button>
        <div class="mt-4" v-loading="loading">
            <el-table :data="data">
                <el-table-column label="类别标题" prop="name"/>
                <el-table-column label="类别描述" prop="description"/>
                <el-table-column label="类别图标">
                    <template slot-scope="{row}">
                        <img class="w-20 h-20 object-cover" :src="row.icon" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="onEditClick(row)">编辑</el-button>
                        <el-button type="text" @click="onDeleteClick(row)" class="red-color">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="totalElements > 0" class="footer flex justify-end items-center">
            <el-pagination
                @current-change="fetchData"
                @size-change="fetchData"
                class="center"
                :current-page.sync="cateForm.page"
                :page-size.sync="cateForm.size"
                :page-sizes="[10, 25, 50]"
                layout="sizes, total, prev, pager, next, jumper"
                :total="totalElements">
            </el-pagination>
        </div>

        <el-dialog
            title="问题类别新增&编辑"
            :visible.sync="visible"
            width="60%"
            :modal-append-to-body="false"
        >
            <el-form
                label-width="90px"
                label-suffix=":"
                @submit.native.prevent>
                <el-form-item label="类别名称" required>
                    <el-input class="input-width" v-model="dialogForm.name" placeholder="请输入类别名称"></el-input>
                </el-form-item>
                <el-form-item label="类别描述" required>
                    <el-input class="input-width" v-model="dialogForm.description" placeholder="请输入类别描述"></el-input>
                </el-form-item>
                <el-form-item label="类别图标" required>
                    <file-upload :type="1" :multiple="false" v-model="dialogForm.icon">
                        <img
                            v-if="dialogForm.icon"
                            :src="dialogForm.icon"
                            class="uploader-icon picture image-uploader"
                        />
                        <i v-else class="el-icon-plus uploader-icon picture image-uploader"></i>
                    </file-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="text-center">
                <el-button type="primary" @click="onAddClick">确 定</el-button>
            </div>
        </el-dialog>

        </el-card>
    </div>
</template>

<script>
import FileUpload from '@/components/base/FileUpload';

export default {
    components: {
        FileUpload,
    },
    data() {
        return {
            activeName: 'first',
            loading: false,
            visible: false,
            data: [],
            cateForm: {
                page: 1,
                size: 10,
            },
            totalElements: 0,
            dialogForm: {
                name: '',
                description: '',
                icon: '',
            },
        };
    },
    watch: {
        visible(val) {
            if (!val) {
                this.dialogForm = {
                    name: '',
                    description: '',
                    icon: '',
                };
            }
        },
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get('problem_category', {params: this.cateForm}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onAddClick() {
            const form = this.dialogForm;
            if (!form.name) return $ele.$message.warning('请输入类别名称');
            if (!form.description) return $ele.$message.warning('请输入类别描述');
            if (!form.icon) return $ele.$message.warning('请上传类别图标');

            let method = 'post';
            let message = '新增成功';

            if (form.id) {
                method = 'put';
                message = '编辑成功';
            }

            this.loading = true;
            API[method]('problem_category', form).then(() => {
                $ele.$message.success(message);
                this.onDialog();
                this.fetchData();
            }).finally(() => this.loading = false);
        },
        onEditClick(e) {
            this.dialogForm = {...e};
            this.onDialog();
        },
        onDeleteClick(row) {
            $ele.$confirm('是否删除此问题类别？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`problem_category/${row.id}`).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
        onDialog() {
            this.visible = !this.visible;
        },

        handleClick() {},
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.global-help-category-page {
    .input-width {
        max-width: 300px;
    }

    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }

    .picture {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }
    .uploader-icon {
        font-size: 20px;
        color: #8c939d;
        text-align: center;
    }
    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-drawer__header > :first-child,
    .el-drawer__open .el-drawer.rtl {
        outline: none;
    }
}
</style>
